﻿@model MobilesStore.Domain.Entities.Product
@using MobilesStore.Domain.Concrete
@using MobilesStore.Domain.Entities
@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<div id="column-left">
        <!--Bestsellers Part Start-->
        <div class="box">
          <div class="box-heading">Bestsellers</div>
          <div class="box-content">
            <div class="box-product">
              <div class="flexslider">
                @{Html.RenderAction("BestSellerProductsSmall", "Nav");}
              </div>
            </div>
          </div>
        </div>
        <!--Bestsellers Part End-->
        <!--Latest Product Start-->
        <div class="box">
          <div class="box-heading">Latest</div>
          <div class="box-content">
            <div class="box-product">
              <div class="flexslider">
                 @{Html.RenderAction("LatestProductsSmall", "Nav");}
              </div>
            </div>
          </div>
        </div>
        <!--Latest Product End-->
        <!--Banner Start-->
        <div class="banner">
          <div><a href="#"><img src="../../Images/image/product/small-banner1-220x350.jpg" alt="banner" title="banner" /></a></div>
        </div>
        <!--Banner End-->
      </div>
      <!--Left End-->
      <!--Middle Part Start--> 
      <div id="content">
          @{
              String imageName = Model.ProductID.ToString() + ".jpg";  
            }
        <div class="breadcrumb"> @Html.ActionLink("Mobiles","List","Product") &raquo; @Html.ActionLink(Model.ProductName, "Detail", "Product", new { Model.ProductID},null) </div>
        <h1>@Model.ProductName</h1>
        <div class="product-info">
          <div class="left">
            <div class="image"><a href="../../Images/image/product/@Model.ProductCategory/big/@imageName" title="@Model.ProductName" class="cloud-zoom colorbox" id='zoom1' rel="adjustX: 0, adjustY:0, tint:'#000000',tintOpacity:0.2, zoomWidth:360, position:'inside', showTitle:false"><img src="../../Images/image/product/@Model.ProductCategory/small/@imageName" title="@Model.ProductName" alt="@Model.ProductName" id="image" /><span id="zoom-image"><i class="zoom_bttn"></i> Zoom</span></a></div>
            <div class="image-additional"> <a href="../../Images/image/product/@Model.ProductCategory/Add1/big/@imageName" title="@Model.ProductName" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../../Images/image/product/@Model.ProductCategory/add1/icon/@imageName' "><img src="../../Images/image/product/@Model.ProductCategory/add1/small/@imageName" width="62" title="@Model.ProductName" alt="@Model.ProductName" /></a> <a href="../../Images/image/product/@Model.ProductCategory/add2/big/@imageName" title="@Model.ProductName" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../../Images/image/product/@Model.ProductCategory/add2/icon/@imageName' "><img src="../../Images/image/product/@Model.ProductCategory/add2/small/@imageName" width="62" title="@Model.ProductName" alt="@Model.ProductName" /></a> <a href="../../Images/image/product/@Model.ProductCategory/add3/big/@imageName" title="@Model.ProductName" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../../Images/image/product/@Model.ProductCategory/add3/icon/@imageName' "><img src="../../Images/image/product/@Model.ProductCategory/add3/small/@imageName" width="62" title="@Model.ProductName" alt="@Model.ProductName" /></a> </div>
          </div>
          <div class="right">
            <div class="description"> <span>Brand: &nbsp</span>@Model.ProductCategory<br />
              <span>Product Code: &nbsp</span> @Model.ProductID<br />
              <span>Availability: &nbsp</span>
                @{
                    if(Model.Quantity>0)
                    {
                       <strong>In Stock</strong>
                    }else{
                        <strong>Out Of Stock</strong>
                    }    
                }
            </div>
            <div class="price">Price: &nbsp<span class="price-old">@Model.ProductPrice.ToString("c")</span> <span class="price-new">@Model.ProductPrice.ToString("c")</span> <br />
            </div>
            <div class="cart">
              <div>
                <div class="qty"> <strong>Qty:</strong> <a class="qtyBtn mines" href="javascript:void(0);">-</a>
                  <input id="qty" type="text" class="w30" name="quantity" size="2" value="1" />
                  <a class="qtyBtn plus" href="javascript:void(0);">+</a>
                  <input type="hidden" name="product_id" size="2" value="30" />
                  <div class="clear"></div>
                </div>
                @using (Html.BeginForm("AddToCart", "Cart"))
                {        
                    @Html.HiddenFor(p=>p.ProductID)
                    @Html.Hidden("returnUrl",Request.Url.PathAndQuery)
                    <input type="submit" value="+ Add To Cart" class="button"/>
                }
              </div>
            </div>
            <div class="review">
                @{
                    EFCommentRepository _EFCommentRepo = new EFCommentRepository();
                    IEnumerable<Comment> _comment = _EFCommentRepo.Comments
                        .Where(c => c.ProductID == Model.ProductID);
                    Int32 numberOfComment = _comment.Count();  
                }
              <div><img src="../../Images/image/stars-3.png" alt="2 reviews" />&nbsp;&nbsp;<a onClick="$('a[href=\'#tab-review\']').trigger('click');">@numberOfComment.ToString() reviews</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onClick="$('a[href=\'#tab-review\']').trigger('click');">Write a review</a></div>
            </div>
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div>
            <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506f325f57fbfc95"></script>
            <!-- AddThis Button END -->
          </div>
        </div>
        <!-- Description and Reviews Tab Start -->
        <div id="tabs" class="htabs"> <a href="#tab-description">Description</a> <a href="#tab-review">Reviews</a> </div>
        <div id="tab-description" class="tab-content">
          @{
            String[] deScription=Model.ProductDescription.Split('#');
            foreach(var subDescription in deScription)
            {
                String[] splitAgain=subDescription.Split(':');
                <p>
                 <strong>@splitAgain[0]</strong><br />
                @splitAgain[1]
                </p>
            }    
           }
        </div>
        <div id="tab-review" class="tab-content">
            @{
                EFCommentRepository EFCommentRepository=new EFCommentRepository();
                IEnumerable<Comment> comments=EFCommentRepository.Comments
                    .Where(c=>c.ProductID==Model.ProductID);
                foreach(var c in comments)
                {
                    <div id="review"><b>@c.Commenter: </b>@c.CommentContent</div>
                }
            }
            @{
                  <div class="buttons">
                    <div class="center">@Html.ActionLink("+Add Your Comment","AddComment","Comment",new {@Model.ProductID},new{@class="button"})</div>
                  </div>
            }
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#tabs a').tabs();
            });
        </script>
        <!-- Description and Reviews Tab Start -->
        <!--Related Product Start-->
        <div class="box">
          <div class="box-heading">Related Products</div>
          <div class="box-content">
            <div class="box-product">
              <div class="flexslider" id="related_pro">
                <ul class="slides">
                 @{
                     EFProductRepository repo = new EFProductRepository();
                     IEnumerable<Product> products = repo.Products
                         .Where(p => p.ProductCategory == Model.ProductCategory)
                            .OrderBy(p => p.ProductID)
                            .Take(9);
                     foreach (var pro in products)
                     {
                        <li>
                            @{Html.RenderPartial("ProductFeaturedSummary", pro);}
                        </li>
                    }
                 }
                </ul>
              </div>
            </div>
          </div>
        </div>
        <script type="text/javascript">
            (function () {
                // store the slider in a local variable
                var $window = $(window),
      flexslider;
                // tiny helper function to add breakpoints
                function getGridSize() {
                    return (window.innerWidth < 320) ? 1 :
		   (window.innerWidth < 600) ? 2 :
		   (window.innerWidth < 800) ? 3 :
           (window.innerWidth < 900) ? 3 : 4;
                }
                $window.load(function () {
                    $('#content #related_pro').flexslider({
                        animation: "slide",
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 210,
                        minItems: getGridSize(), // use function to pull in initial value
                        maxItems: getGridSize() // use function to pull in initial value
                    });
                });
            } ());
</script>
        <!--Related Product End-->
      </div>
      <!--Middle Part End-->

